<template>
  <div class="tabbar-tool">
    <a-popover trigger="click" placement="bottom">
      <template #content>
        <div class="tabbar-tool-content">
          <div class="tabbar-item" v-for="item in tools" :key="(item.name as string)" @click="item.onClick">
            <component :is="item.icon" :class="item.iconClass" />
            <span>{{item.name}}</span>
          </div>
        </div>
      </template>
      <span class="icon-box">
        <DownOutlined class="down-icon" />
      </span>
    </a-popover>
  </div>
</template>

<script lang='ts' setup>
import { DownOutlined , CloseOutlined , PushpinOutlined , ExpandOutlined , ReloadOutlined , SwapLeftOutlined , SwapOutlined , SwapRightOutlined , FormOutlined , VerticalAlignMiddleOutlined , ShrinkOutlined } from '@ant-design/icons-vue';
import { ref , computed , type ComputedRef, type Component, nextTick } from 'vue';
import { useTabbar } from './tabbar/useTabbar';
import { useRoute , useRouter } from 'vue-router';
import { useConfigStore } from '@/stores/configs/config';
interface ITool {
  name: string | ComputedRef<string>;
  icon: Component;
  iconClass: string;
  onClick: () => void;
};
const configStore = useConfigStore();
const router = useRouter();
const emits = defineEmits(['max-screen' , 'reload' , 'fixed']);
const route = useRoute();
const { getActiveTab , closeAndOpenNextTab , closeLeftAllTabs , closeRightAllTabs , closeAllTabs , currentTabs } = useTabbar();
const tools = ref<ITool[]>([
  {
    name : '关闭' ,
    icon : CloseOutlined , 
    iconClass : 'icon',
    onClick () {
      const tab = getActiveTab(route.fullPath);
      closeAndOpenNextTab(tab);
    }
  },
  {
    name : computed(() => {
      const tab = currentTabs.value.find(tab => tab.fullPath === route.fullPath);
      return tab?.meta.fixed ? '取消固定' : '固定';
    }) , 
    icon: PushpinOutlined, 
    iconClass : 'icon',
    onClick () {
      emits('fixed')
    }
  },
  {
    name : computed(() => {
      return !configStore.isFullscreen ? '最大化' : '还原';
    }),
    icon : computed(() => {
      return !configStore.isFullscreen ? ExpandOutlined : ShrinkOutlined
    }), 
    iconClass : 'icon',
    onClick () {
      emits('max-screen' , !configStore.isFullscreen);
    }
  },
  {
    name : '重新加载' , 
    icon : ReloadOutlined , 
    iconClass : 'icon',
    onClick () {
      emits('reload');
    }
  },
  {
    name : '在新窗口打开'  , 
    icon : FormOutlined , 
    iconClass : 'icon',
    onClick () {
      window.open(window.location.href);
    }
  },
  {
    name : '关闭左侧标签页' , 
    icon : SwapLeftOutlined , 
    iconClass : 'icon',
    onClick () {
      closeLeftAllTabs(route.fullPath);
    }
  },
  {
    name : '关闭右侧标签页' , 
    icon : SwapRightOutlined , 
    iconClass : 'icon',
    onClick () {
      closeRightAllTabs(route.fullPath);
    }
  },
  {
    name : '关闭其他标签页' , 
    icon : VerticalAlignMiddleOutlined , 
    iconClass : 'icon other',
    onClick () {
      closeLeftAllTabs(route.fullPath);
      closeRightAllTabs(route.fullPath);
    }
  },
  {
    name : '关闭所有标签页' , 
    icon : SwapOutlined , 
    iconClass : 'icon',
    onClick () {
      closeAllTabs();
      nextTick(() => {
        router.push('/');
      })
    }
  }
]);
</script>

<style lang='less' scoped>
.tabbar-tool {
  width: 0.38rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 0.01rem solid;
  cursor: pointer;
  transition: all 0.3s;
  .useTheme({
    border-left-color: border-color;
  });
  .useHover({
    background-color: primary-color;
  } , 0.2);
  .arrow-icon {
    font-size: var(--font-size-base);
    .useTheme({
      color: text-color;
    });
  }
  .icon-box {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .useTheme({
      color: text-color;
    });
  }
}
.tabbar-tool-content {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  padding: 0.1rem;
  gap: 0.1rem;
  .tabbar-item {
    display: flex;
    align-items: center;
    gap: 0.06rem;
    line-height: 2;
    cursor: pointer;
    padding: 0 0.1rem;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: all 0.2s;
    height: 0.32rem;
    font-size: var(--font-size-base);
    .useTheme({
      color: text-color;
    });
    &:hover {
      .useTheme({
        background-color: primary-color;
      } , 0.3);
      .useTheme({
        color: primary-color;
      });
    }
    .icon {
      font-size: var(--font-size-base);
      &.other {
        transform: rotate(90deg);
      }
    }
  }
}
</style>